import React, { useState, useRef } from 'react';
import { format } from '@/utils/datetime';
import PageHeader from '@/components/page/PageHeader';
import DataTable from '@/components/base/DataTable';
import DataEdit from '@/components/base/DataEdit';
import { AddCompCdzy, DeleteCompCdzy } from '@/services/commCRUD';
import _ from 'lodash';
import { Button, message, Modal } from 'antd';
const daoName = 'CompAccoYdzy';
const columns: API.Column[] = [
  {
    title: '客户名称',
    width: 250,
    sorter: true,
    key: 'CUNM',
    dataIndex: 'CUNM',
    dispaly: true,
    filter: true,
  },
  {
    title: '账号',
    width: 260,
    sorter: true,
    key: 'ACNO',
    dataIndex: 'ACNO',
    dispaly: true,
    filter: true,
  },
  {
    title: '子账户',
    width: 110,
    sorter: true,
    key: 'BANO',
    dataIndex: 'BANO',
    dispaly: true,
    filter: true,
  },
  {
    title: '卡号',
    width: 250,
    sorter: true,
    key: 'KH',
    dataIndex: 'KH',
    dispaly: true,
    filter: true,
  },
  {
    title: '起息日',
    width: 120,
    sorter: true,
    key: 'VLDT',
    dataIndex: 'VLDT',
    render: (data) => format(data, 'yyyy-MM-dd'),
    dispaly: true,
    filter: true,
  },
  {
    title: '到息日',
    width: 120,
    sorter: true,
    key: 'MADT',
    dataIndex: 'MADT',
    render: (data) => format(data, 'yyyy-MM-dd'),
    dispaly: true,
    filter: true,
  },
  {
    title: '存期',
    width: 150,
    sorter: true,
    key: 'RDNM',
    dataIndex: 'RDNM',
    dispaly: true,
    filter: true,
  },
  {
    title: '科目号',
    width: 150,
    sorter: true,
    key: 'ITNO',
    dataIndex: 'ITNO',
    dispaly: true,
    filter: true,
  },
  {
    title: '科目',
    width: 150,
    sorter: true,
    key: 'ITNM',
    dataIndex: 'ITNM',
    dispaly: true,
    filter: true,
  },
  {
    title: '币种',
    width: 150,
    sorter: true,
    key: 'CYNM',
    dataIndex: 'CYNM',
    dispaly: true,
    filter: true,
  },
  {
    title: '是否存单质押',
    width: 150,
    key: 'ISCDZY',
    dataIndex: 'ISCDZY',
    render: (ISCDZY: any) => {
      if (ISCDZY === 1) {
        return '是';
      } else {
        return '否';
      }
    },
    dispaly: true,
    filter: true,
    sorter: true,
  },
];
const controls: API.Control[] = [
  {
    name: 'CUNM',
    rules: [{ required: false, message: '不能为空' }],
    type: 'text',
    label: '客户名称',
    grid: 12 / 24,
    disabled: true,
  },
  {
    name: 'ACNO',
    rules: [{ required: false, message: '不能为空' }],
    type: 'text',
    label: '账户',
    grid: 12 / 24,
    disabled: true,
  },
  {
    name: 'BANO',
    rules: [{ required: false, message: '不能为空' }],
    type: 'text',
    label: '子账户',
    grid: 12 / 24,
    disabled: true,
  },
  {
    name: 'KH',
    rules: [{ required: false, message: '不能为空' }],
    type: 'text',
    label: '卡号',
    grid: 12 / 24,
    disabled: true,
  },
  {
    name: 'VLDT',
    rules: [{ required: false, message: '不能为空' }],
    type: 'date',
    label: '起息日',
    grid: 12 / 24,
    dataType: 'date',
    disabled: true,
  },
  {
    name: 'MADT',
    rules: [{ required: false, message: '不能为空' }],
    type: 'date',
    label: '到息日',
    grid: 12 / 24,
    dataType: 'date',
    disabled: true,
  },
  {
    name: 'RDNM',
    rules: [{ required: false, message: '不能为空' }],
    type: 'text',
    label: '存期',
    grid: 12 / 24,
    disabled: true,
  },
  {
    name: 'ITNO',
    rules: [{ required: false, message: '不能为空' }],
    type: 'text',
    label: '科目号',
    grid: 12 / 24,
    disabled: true,
  },
  {
    name: 'ITNM',
    rules: [{ required: false, message: '不能为空' }],
    type: 'text',
    label: '科目名称',
    grid: 12 / 24,
    disabled: true,
  },
  {
    name: 'CYNM',
    rules: [{ required: false, message: '不能为空' }],
    type: 'text',
    label: '币种',
    grid: 12 / 24,
    disabled: true,
  },
  {
    name: 'ISCDZY',
    label: '是否存单质押',
    rules: [{ required: true, message: '不能为空' }],
    options: [
      { value: '1', label: '是' },
      { value: '0', label: '否' },
    ],
    grid: 12 / 24,
    type: 'select',
  },
];
const YdzywhForm: React.FC = () => {
  const [showEdit, setShowEdit] = useState<boolean>(false);
  const [acid, setAcid] = useState<number>(0);
  const tableRef = useRef<API.TableAction>();
  const submit = async () => {
    if (acid === 0) {
      message.info('请选择要修改的账户');
      return;
    }
    Modal.confirm({
      title: '提示',
      content: `你确认要设置存单质押吗？`,
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        AddCompCdzy(acid)
          .then(function () {
            if (tableRef.current) {
              message.info('修改成功');
              tableRef.current?.reload();
            }
          })
          .catch(function (ex) {
            console.error('设置存单质押出错', ex);
          });
      },
    });
  };
  return (
    <PageHeader>
      <div style={{ marginTop: -5, marginBottom: 10 }}>
        <DataEdit
          showType="inner"
          layout="vertical"
          visible={showEdit}
          onSumit={submit}
          onVisibleChange={(visible) => setShowEdit(visible)}
          renderButtons={(p) => {
            return [
              <Button type="primary" key="submit" onClick={() => p.form?.submit?.()}>
                设置存单质押
              </Button>,
              <Button
                type="default"
                key="rest"
                onClick={() => {
                  if (acid === 0) {
                    message.info('请选择要恢复的账户');
                    return;
                  }
                  Modal.confirm({
                    title: '提示',
                    content: `你确认要取消存单质押吗？`,
                    okText: '确定',
                    cancelText: '取消',
                    onOk: () => {
                      DeleteCompCdzy(acid)
                        .then(function () {
                          if (tableRef.current) {
                            message.info('恢复成功');
                            tableRef.current?.reload();
                          }
                        })
                        .catch(function (ex) {
                          console.error('恢复存单质押出错', ex);
                        });
                    },
                  });
                }}
              >
                取消存单质押
              </Button>,
            ];
          }}
          controls={[]}
        />
      </div>

      <DataTable
        actionRef={tableRef}
        daoName={daoName}
        columns={columns}
        controls={controls}
        keyColName={'ACID'}
        pageSize={20}
        onSelectChange={async (keys) => {
          if (!_.isEmpty(keys)) {
            setAcid(keys[0] as number);
          }
        }}
      />
    </PageHeader>
  );
};

export default YdzywhForm;
